<div class="container jog-controller">

    <div class="row">
        <div class="col-3"></div>
        <div class="col-3 d-flex justify-content-center">
            <button class="btn btn-secondary" (click)="jog(0, 1, 0)">
                Y+
                <fa-icon [icon]="faChevronCircleUp" size="lg"></fa-icon>
            </button>
        </div>
        <div class="col-3"></div>
        <div class="col-3 d-flex justify-content-center">
            <button class="btn btn-secondary" (click)="jog(0, 0, 1)">
                Z+
                <fa-icon [icon]="faArrowCircleUp" size="lg"></fa-icon>
            </button>
        </div>
    </div>

    <div class="row">
        <div class="col-3 d-flex justify-content-center">
            <button class="btn btn-secondary" (click)="jog(-1, 0, 0)">
                <fa-icon [icon]="faChevronCircleLeft" size="lg"></fa-icon>
                X-
            </button>
        </div>
        <div class="col-3"></div>
        <div class="col-3 d-flex justify-content-center">
            <button class="btn btn-secondary" (click)="jog(1, 0, 0)">
                X+
                <fa-icon [icon]="faChevronCircleRight" size="lg"></fa-icon>
            </button>
        </div>
        <div class="col-3"></div>
    </div>

    <div class="row">
        <div class="col-3"></div>
        <div class="col-3 d-flex justify-content-center">
            <button class="btn btn-secondary" (click)="jog(0, -1, 0)">
                Y-
                <fa-icon [icon]="faChevronCircleDown" size="lg"></fa-icon>
            </button>
        </div>
        <div class="col-3"></div>
        <div class="col-3 d-flex justify-content-center">
            <button class="btn btn-secondary" (click)="jog(0, 0, -1)">
                Z-
                <fa-icon [icon]="faArrowCircleDown" size="lg"></fa-icon>
            </button>
        </div>
    </div>

    <div class="form-group">
        <label>XY Step size:</label>
        <input type="text" class="form-control" [value]="settings.jogStepSizeXY"
               (input)="onStepSizeXYChange($event.target.value)"/>
    </div>
    <div class="form-group">
        <label>Z Step size:</label>
        <input type="text" class="form-control" [value]="settings.jogStepSizeZ"
               (input)="onStepSizeZChange($event.target.value)"/>
    </div>
    <div class="form-group">
        <label>Feed rate:</label>
        <input type="text" class="form-control" [value]="settings.jogFeedRate"
               (input)="onFeedRateChange($event.target.value)"/>
    </div>
</div>

